<template>
    <div id="aaa">

        <div>
        <div id="block" >
            <span id="sp" >请输入年份：</span>
            <el-input id="eld"
                    v-model="value3"
                    type="year"
                    placeholder="选择年"
                    @change="myEcharts2">
            </el-input>
        </div>

        <div id="main" style="width: 950px;height:500px;"></div>
        </div>
        <div id="main2" style="width:500px;height:500px;" ></div>
    </div>
</template>

<script>

    export default {
        name: "Echarts2",
        data() {
            return {
                value3: '2019'
            }
        },
        created() {
            //根据token获取用户的信息
            setTimeout(() => { //延时加载echarts初始化函数
                this.myEcharts2(),
                this.myEcharts3()
            }, 100)
        },
        methods: {
            myEcharts2() {
            var that=this;
                // 基于准备好的dom，初始化echarts实例
                var myChart = this.$echarts.init(document.getElementById('main'));
                var uldate;
                this.$axios.post(`clms-statistics/statistics/logdata/${this.value3}`).then(function (response) {
                    console.log(response.data.object)
                    uldate = response.data.object
                   that.myEcharts3();

                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: '系统操作日志统计',
                            "textStyle": {
                                fontFamily:'KaiTi',
                                fontSize: 25
                            }

                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['添加操作', '更新操作', '删除操作']
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                dataZoom: {
                                    xAxisIndex: 'none'
                                },
                                dataView: {readOnly: false},
                                magicType: {type: ['line', 'bar']},
                                restore: {},
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: uldate.newdatax,
                        },
                        yAxis: {
                            type: 'value',
                            position: 'left',
                            axisLine: {
                                show: true,
                            },

                            axisLabel: {
                                formatter: '{value} 次'
                            }
                        },
                        series: [
                            {
                                name: '添加操作',
                                type: 'line',
                                data: uldate.count1,
                                markPoint: {
                                    data: [
                                        {type: 'max', name: '最大值'},
                                        {type: 'min', name: '最小值'}
                                    ]
                                },
                                markLine: {
                                    data: [
                                        {type: 'average', name: '平均值'},
                                        [{
                                            x: '90%',
                                            yAxis: 'max'
                                        }, {
                                            symbol: 'circle',
                                            label: {
                                                position: 'start',
                                                formatter: '最大值'
                                            },
                                            type: 'max',
                                            name: '最高点'
                                        }]
                                    ]
                                }
                            },
                            {
                                name: '更新操作',
                                type: 'line',
                                data: uldate.count2,
                                markLine: {
                                    data: [
                                        {type: 'average', name: '平均值'},
                                        [{
                                            x: '90%',
                                            yAxis: 'max'
                                        }, {
                                            symbol: 'circle',
                                            label: {
                                                position: 'start',
                                                formatter: '最大值'
                                            },
                                            type: 'max',
                                            name: '最高点'
                                        }]
                                    ]
                                }
                            },
                            {
                                name: '删除操作',
                                type: 'line',
                                data: uldate.count3,
                                markLine: {
                                    data: [
                                        {type: 'average', name: '平均值'},
                                        [{
                                            x: '90%',
                                            yAxis: 'max'
                                        }, {
                                            symbol: 'circle',
                                            label: {
                                                position: 'start',
                                                formatter: '最大值'
                                            },
                                            type: 'max',
                                            name: '最高点'
                                        }]
                                    ]
                                }

                            }
                        ]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                })
            },
            myEcharts3() {
                // 基于准备好的dom，初始化echarts实例
                var myChart = this.$echarts.init(document.getElementById('main2'));
                var uldate;
                this.$axios.post(`clms-statistics/statistics/operatortype/${this.value3}`).then(function (response) {
                    console.log(response.data.object)
                    uldate = response.data.object
                  var  option = {
                      title: {
                          text: '访问来源',
                          x:'center',
                          y:'top',
                          textAlign:'left',
                          "textStyle": {
                              fontFamily:'KaiTi',
                              fontSize: 25
                          }},

                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            top: '5%',
                            left: 'center'
                        },
                        series: [
                            {
                                name: '访问来源',
                                type: 'pie',
                                radius: ['40%', '70%'],
                                avoidLabelOverlap: false,
                                itemStyle: {
                                    borderRadius: 10,
                                    borderColor: '#fff',
                                    borderWidth: 2
                                },
                                label: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        fontSize: '35',
                                        fontWeight: 'bold'
                                    }
                                },
                                labelLine: {
                                    show: false
                                },
                                data: [
                                    {value: uldate.type1, name: '后台用户'},
                                    {value: uldate.type2, name: '手机用户'},

                                ]
                            }
                        ]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                })

            }

        }
    }

</script>

<style>
    #aaa{
        height: 100%;
        display:flex ;
        justify-content:flex-start;
        background-color: white;

    }
    #block{
        text-align: left;
        margin-left: 30px;
        margin-top: 10px;
        height: 80px;
        display:flex ;
        justify-content:flex-start
    }
    #sp{
        font-family:KaiTi ;
        font-size: 23px;
        margin-top: 20px;
        width: 180px;
        height: 50px;
    }
    #eld{
        margin-bottom: 10px;
        margin-top: 10px;
        width: 210px;
        height: 50px;
    }
    #main2{
        margin-top: 100px;

    }

</style>